<template>
  <div class="container">
    <div class="lecturer-wrap">
      <div class="w1300">
        <teacher-header :lecturerId="lecturerId"></teacher-header>
        <div class="t-side-bar">
          <router-link to="/course/lecturer">主页</router-link>
          <router-link to="/course/course">课程（19）</router-link>
          <router-link to="/course/comment">评价（19）</router-link>
          <router-link to="/course/community">社区帖子（19）</router-link>
        </div>
      </div>
    </div>
    <div class="main">
      <!--      <router-view></router-view>-->
      <div class="w1300">
        <look-both title="我的课程"></look-both>
        <div class="con flex">
          <course :data="courseList"></course>
        </div>
        <div class="comment-con">
          <look-both title="我的评论"></look-both>
          <div class="con">
            <teacher-comment></teacher-comment>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Course from '@/pages/course/components/CourseCom.vue'
import LookBoth from '@/pages/course/components/LookBoth.vue'
import TeacherComment from '@/pages/course/components/TeacherComment.vue'
import TeacherHeader from '@/pages/course/views/layout/components/TeacherHeader.vue'

import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { respCourseData } from '@/pages/course/api/types/course'
import { useCourse } from '@/pages/course/composables/course.ts'

const route = useRoute()
const lecturerId = route.query.lecturerId + ''

const courseList = ref<respCourseData[]>([])

const { getCourseList, getLecturerData } = useCourse()
onMounted(async () => {
  courseList.value = await getCourseList({ lecturerId, pageSize: 3 })
})
</script>

<style scoped lang="scss">
.container {
  overflow: hidden;
  background-color: #f7f8fa;
  .lecturer-wrap {
    background-color: #fff;
  }
  .t-side-bar {
    padding: 16px 0 10px;
    border-top: 1px solid #f2f2f2;

    > a {
      display: inline-block;
      padding-bottom: 7px;
      border-bottom: 2px solid transparent;

      & + a {
        margin-left: 80px;
      }

      &.router-link-active,
      &:hover {
        color: $primary;
        border-bottom-color: $primary;
      }
    }
  }

  > .con {
    flex-wrap: wrap;
  }

  .comment-con {
    padding: 0 16px 0 34px;
    margin-bottom: 50px;
    background-color: #fff;
  }
}
</style>
